<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>认识css中的盒子模型</title>
    <!--
    介绍:
        1. 所有的HTML元素都可以被认为是盒子。CSS盒模型代表网站的设计和布局。 它由外边距(margin)，边框(border)，内边距(padding)和实际内容组成。
        2. 当您使用CSS设置元素的宽度和高度属性时，可以设置内容区域的宽度和高度。
        3. 在盒模型中设置背景颜色时，将覆盖内容区域以及填充区域(padding)。
        4. 由于CSS通过盒模型来确定一个元素的大小以及如何放置它们。使用盒模型时，了解元素的总宽度是如何计算的非常重要:
            - 如果只设置了padding为10px和width为200px, 则总的宽度为10+200+10=220px;
            - 如果设置了margin为10px, border为5px, padding为10px, width为200px, 则总宽度为10+5+10+200+10+5+10=250px.
            - 高度计算和宽度计算同理.总元素高度 = 高度(height) + 顶部填充(padding-top) + 底部填充(padding-bottom) + 顶部边框(border-top) + 底部边框(border-bottom) + 顶部边距(margin-top) + 底部边距(margin-bottom)
    -->
</head>
<body>

</body>
</html>